<!DOCTYPE html>
<HTML>

<HEAD>
	<meta charset="utf-8" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<TITLE> test tree</TITLE>

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap5@1.1.9/src/css/bootstrap.min.css">
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap5@1.1.9/src/js/bootstrap.bundle.min.js"></script>
	<style rel='stylesheet' type='text/css'>
		#drag {
			/* Misc */
			border: 1px solid #cbd5e0;
			height: auto;
			width: 20rem;
		}
	</style>
	<SCRIPT type="module" LANGUAGE="JavaScript">
		import Tree from "/tree.js"
		import Resizable from '/resizable.js';

		$().ready(function () {
			Resizable.SetElementResizable('#drag', Resizable.Side.RIGHT);
			const _tm = new Tree.TreeManager('#abc');
			_tm.Init();
			_tm.Render();
		});

	</SCRIPT>
</HEAD>

<BODY>
	<div id="container">
		<div id="drag">
			<div id="abc">
			</div>
		</div>
	</div>
</BODY>

</HTML>